<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>Jason&#39;s Blog</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="人与人的悲欢并不相通，孤独是生命的本质。">
<meta property="og:type" content="website">
<meta property="og:title" content="Jason&#39;s Blog">
<meta property="og:url" content="https://xianguoji.gitee.io/myblog/page/2/index.html">
<meta property="og:site_name" content="Jason&#39;s Blog">
<meta property="og:description" content="人与人的悲欢并不相通，孤独是生命的本质。">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="Jason">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/myblog/" title="Jason&#39;s Blog" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="/myblog/css/style.css">

<meta name="generator" content="Hexo 5.0.2"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/myblog/" id="logo">人与人的悲欢并不相通，孤独是生命的本质。</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/myblog/" id="subtitle">欢迎来到我的个人网站</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/myblog/">Home</a>
        
          <a class="main-nav-link" href="/myblog/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/myblog/" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="https://xianguoji.gitee.io/myblog"></form>
      </div>
    </div>
  </div>
</header>
<style>
  #logo{
    text-shadow:0 0 5px #000;
    /* font-weight: bold; */
  }
  #subtitle-wrap{
    margin-top: 50px;
  }
</style>
      <div class="outer">
        <section id="main">
  
    <article id="post-2017-02-23-网站上实现qq聊天，网站绑定微信登录" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/myblog/2017/02/23/2017-02-23-%E7%BD%91%E7%AB%99%E4%B8%8A%E5%AE%9E%E7%8E%B0qq%E8%81%8A%E5%A4%A9%EF%BC%8C%E7%BD%91%E7%AB%99%E7%BB%91%E5%AE%9A%E5%BE%AE%E4%BF%A1%E7%99%BB%E5%BD%95/" class="article-date">
  <time datetime="2017-02-22T16:00:00.000Z" itemprop="datePublished">2017-02-23</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/myblog/2017/02/23/2017-02-23-%E7%BD%91%E7%AB%99%E4%B8%8A%E5%AE%9E%E7%8E%B0qq%E8%81%8A%E5%A4%A9%EF%BC%8C%E7%BD%91%E7%AB%99%E7%BB%91%E5%AE%9A%E5%BE%AE%E4%BF%A1%E7%99%BB%E5%BD%95/">网站上实现qq聊天，网站绑定微信登录</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="QQ在线聊天的功能是怎么实现的？"><a href="#QQ在线聊天的功能是怎么实现的？" class="headerlink" title="QQ在线聊天的功能是怎么实现的？"></a>QQ在线聊天的功能是怎么实现的？</h3><p>网站的微信扫码登录和qq在线聊天是需要我们这边去申请和认证的，初来乍到经理就让我弄这些着实吓着我了，宝宝啥都不知道啊。但是要强的宝宝没有告诉经理我不会，只有硬着头皮去求度娘（度娘有时候也会任性一下让你找好久才能找到你想要的–其实是我太笨）</p>
<p>其实很简单,打开下面这个链接，登录公司的QQ号，点击“推广工具”，把里面的代码复制给程序员，加到网站上就好了。</p>
<p><a target="_blank" rel="noopener" href="http://shang.qq.com/v3/widget.html">http://shang.qq.com/v3/widget.html</a></p>
<p>是不是很简单，是也不要笑话我，毕竟我当时完全不知道这是什么情况，一直纠结“为什么QQ在线聊天和QQ推广有关系，嗯纠结太久，后来发现就是这个”</p>
<h3 id="网站绑定微信登录是怎么实现的"><a href="#网站绑定微信登录是怎么实现的" class="headerlink" title="网站绑定微信登录是怎么实现的"></a>网站绑定微信登录是怎么实现的</h3><p>这个功能其实也很简单，关键也是当时完全不知道入口是哪里，其实就是以公司名义注册一个“微信开放平台”，我是用公司QQ登录的，在“管理中心”把“AppID和</p>
<p>AppSecret”给开发者就好，当然技术上的就没办法给大家分享了，我也不会啊emoticon（装逼失败）</p>
<p><a target="_blank" rel="noopener" href="https://open.weixin.qq.com/cgi-bin/index?t=home/index&amp;lang=zh_CN&amp;token=55068190a341700ecf6725cdef50786b4b7b9737&amp;appid=wxb3f9e53518e3011e">https://open.weixin.qq.com/cgi-bin/index?t=home/index&amp;lang=zh_CN&amp;token=55068190a341700ecf6725cdef50786b4b7b9737&amp;appid=wxb3f9e53518e3011e</a></p>
<p>这些工作在去年11月份做的，网站上线后我做的更多的工作是APP功能规划，和寻找更好的外包方合作（可以想到坏人都让我给做了，后面公司选择哪个剩下的我都觉得好抱歉，沟通那么久，哎……）其实工作中我学会更多是沟通技巧，和工作方式，以及工作总结，以前和外包方对接工作时，这边在大声的骂娘，那边还要好声好气的和她们沟通，我的暴脾气……后来休假时出去走走，想想这么做也不是个办法，自己生气问题还很难解决，所以回去后彻底改变态度，真的是心平气和的和他们对接工作，也发现自己后时候的表达方式有问题，别人可能不理解我的意思，果然现在的工作对接的都很顺畅。不过我的各种修改需求也让他们很崩溃吧，虽然能理解，但是我更多的还是要为公司利益着想，不能太个人感情化。</p>
<p>tillbest.com这是我们公司的官网，不是很好看（我们选图有点问题可能），但是比刚刚上线那会要在功能上要好很多，大家有意愿的可以去看看。</p>
<p>嗯还是很怀念以前前端网陪我学习的日子，小伙伴们加油。</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://xianguoji.gitee.io/myblog/2017/02/23/2017-02-23-%E7%BD%91%E7%AB%99%E4%B8%8A%E5%AE%9E%E7%8E%B0qq%E8%81%8A%E5%A4%A9%EF%BC%8C%E7%BD%91%E7%AB%99%E7%BB%91%E5%AE%9A%E5%BE%AE%E4%BF%A1%E7%99%BB%E5%BD%95/" data-id="ckds6fxa5000bk8qcc5ur3m20" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/myblog/tags/%E5%85%B6%E4%BB%96/" rel="tag">其他</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-2017-01-22-Vue.js项目结构说明" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/myblog/2017/01/12/2017-01-22-Vue.js%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84%E8%AF%B4%E6%98%8E/" class="article-date">
  <time datetime="2017-01-11T16:00:00.000Z" itemprop="datePublished">2017-01-12</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/myblog/2017/01/12/2017-01-22-Vue.js%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84%E8%AF%B4%E6%98%8E/">Vue.js项目结构说明</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="简单介绍目录结构"><a href="#简单介绍目录结构" class="headerlink" title="简单介绍目录结构"></a>简单介绍目录结构</h3><p>build目录是一些webpack的文件，配置参数什么的，一般不用动 </p>
<p>config是vue项目的基本配置文件 </p>
<p>node_modules是项目中安装的依赖模块 </p>
<p>src源码文件夹，基本上文件都应该放在这里。 </p>
<p>—assets 资源文件夹，里面放一些静态资源 </p>
<p>—components这里放的都是各个组件文件 </p>
<p>—App.vue App.vue组件 </p>
<p>—main.js入口文件 </p>
<p>static生成好的文件会放在这个目录下。</p>
<p>test测试文件夹，测试都写在这里 </p>
<p>.babelrc babel编译参数，vue开发需要babel编译 </p>
<p>.editorconfig 看名字是编辑器配置文件，不晓得是哪款编辑器，没有使用过。 </p>
<p>.gitignore 用来过滤一些版本控制的文件，比如node_modules文件夹 </p>
<p>index.html 主页</p>
<p>package.json 项目文件，记载着一些命令和依赖还有简要的项目描述信息 </p>
<p>README.md 介绍自己这个项目的，想怎么写怎么写。不会写就参照github上star多的项目，看人家怎么写的</p>
<h3 id="详细介绍几个文件"><a href="#详细介绍几个文件" class="headerlink" title="详细介绍几个文件"></a>详细介绍几个文件</h3><h4 id="1-package-json"><a href="#1-package-json" class="headerlink" title="1.package.json"></a>1.package.json</h4><pre><code>&#123;
  &quot;name&quot;: &quot;demo&quot;,
  &quot;version&quot;: &quot;1.0.0&quot;,
  &quot;description&quot;: &quot;A Vue.js project&quot;,
  &quot;author&quot;: &quot;Luke.deng&quot;,
  &quot;private&quot;: true,
  &quot;scripts&quot;: &#123;
    &quot;dev&quot;: &quot;node build/dev-server.js&quot;,
    &quot;build&quot;: &quot;node build/build.js&quot;,
    &quot;e2e&quot;: &quot;node test/e2e/runner.js&quot;,
    &quot;test&quot;: &quot;npm run e2e&quot;
  &#125;,
  &quot;dependencies&quot;: &#123;
    &quot;vue&quot;: &quot;^2.1.0&quot;
  &#125;,
  &quot;devDependencies&quot;: &#123;
    &quot;autoprefixer&quot;: &quot;^6.4.0&quot;,
    &quot;babel-core&quot;: &quot;^6.0.0&quot;,
    &quot;babel-loader&quot;: &quot;^6.0.0&quot;,
    &quot;babel-plugin-transform-runtime&quot;: &quot;^6.0.0&quot;,
    &quot;babel-preset-es2015&quot;: &quot;^6.0.0&quot;,
    &quot;babel-preset-stage-2&quot;: &quot;^6.0.0&quot;,
    &quot;babel-register&quot;: &quot;^6.0.0&quot;,
    &quot;chalk&quot;: &quot;^1.1.3&quot;,
    &quot;connect-history-api-fallback&quot;: &quot;^1.1.0&quot;,
    &quot;css-loader&quot;: &quot;^0.25.0&quot;,
    &quot;eventsource-polyfill&quot;: &quot;^0.9.6&quot;,
    &quot;express&quot;: &quot;^4.13.3&quot;,
    &quot;extract-text-webpack-plugin&quot;: &quot;^1.0.1&quot;,
    &quot;file-loader&quot;: &quot;^0.9.0&quot;,
    &quot;function-bind&quot;: &quot;^1.0.2&quot;,
    &quot;html-webpack-plugin&quot;: &quot;^2.8.1&quot;,
    &quot;http-proxy-middleware&quot;: &quot;^0.17.2&quot;,
    &quot;json-loader&quot;: &quot;^0.5.4&quot;,
    &quot;chromedriver&quot;: &quot;^2.21.2&quot;,
    &quot;cross-spawn&quot;: &quot;^4.0.2&quot;,
    &quot;nightwatch&quot;: &quot;^0.9.8&quot;,
    &quot;selenium-server&quot;: &quot;2.53.1&quot;,
    &quot;semver&quot;: &quot;^5.3.0&quot;,
    &quot;opn&quot;: &quot;^4.0.2&quot;,
    &quot;ora&quot;: &quot;^0.3.0&quot;,
    &quot;shelljs&quot;: &quot;^0.7.4&quot;,
    &quot;url-loader&quot;: &quot;^0.5.7&quot;,
    &quot;vue-loader&quot;: &quot;^10.0.0&quot;,
    &quot;vue-style-loader&quot;: &quot;^1.0.0&quot;,
    &quot;vue-template-compiler&quot;: &quot;^2.1.0&quot;,
    &quot;webpack&quot;: &quot;^1.13.2&quot;,
    &quot;webpack-dev-middleware&quot;: &quot;^1.8.3&quot;,
    &quot;webpack-hot-middleware&quot;: &quot;^2.12.2&quot;,
    &quot;webpack-merge&quot;: &quot;^0.14.1&quot;
  &#125;,
  &quot;engines&quot;: &#123;
    &quot;node&quot;: &quot;&gt;= 4.0.0&quot;,
    &quot;npm&quot;: &quot;&gt;= 3.0.0&quot;
  &#125;
&#125;</code></pre>
<h3 id="package-json文件是项目配置文件，除了项目的一些基本信息外，有3个重要的节点我说明一下："><a href="#package-json文件是项目配置文件，除了项目的一些基本信息外，有3个重要的节点我说明一下：" class="headerlink" title="package.json文件是项目配置文件，除了项目的一些基本信息外，有3个重要的节点我说明一下："></a>package.json文件是项目配置文件，除了项目的一些基本信息外，有3个重要的节点我说明一下：</h3><pre><code>dependencies：项目发布时的依赖
devDependencies：项目开发时的依赖
scripts：编译项目的一些命令</code></pre>
<h3 id="2-babelrc文件"><a href="#2-babelrc文件" class="headerlink" title="2. .babelrc文件"></a>2. .babelrc文件</h3><h4 id="babelrc文件定义了ES6的转码规则，基于ES6编写的js代码在编译时都会被babel转码器转换为ES5代码。"><a href="#babelrc文件定义了ES6的转码规则，基于ES6编写的js代码在编译时都会被babel转码器转换为ES5代码。" class="headerlink" title=".babelrc文件定义了ES6的转码规则，基于ES6编写的js代码在编译时都会被babel转码器转换为ES5代码。"></a>.babelrc文件定义了ES6的转码规则，基于ES6编写的js代码在编译时都会被babel转码器转换为ES5代码。</h4><pre><code>&#123;
  &quot;presets&quot;: [&quot;es2015&quot;, &quot;stage-2&quot;],
  &quot;plugins&quot;: [&quot;transform-runtime&quot;],
  &quot;comments&quot;: false
&#125;</code></pre>
<h3 id="3-index-html"><a href="#3-index-html" class="headerlink" title="3.index.html"></a>3.index.html</h3><p>主页我们可以像平时普通的html文件一样引入文件和书写基本信息，添加meta标签等。</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta content=&quot;yes&quot; name=&quot;apple-mobile-web-app-capable&quot; /&gt;
    &lt;meta content=&quot;yes&quot; name=&quot;apple-touch-fullscreen&quot; /&gt;
    &lt;meta content=&quot;telephone=no,email=no&quot; name=&quot;format-detection&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0&quot;&gt;
    &lt;title&gt;华企商学院&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
<h3 id="4-main-js"><a href="#4-main-js" class="headerlink" title="4.main.js"></a>4.main.js</h3><p>这里是入口文件，可以引入一些插件或静态资源，当然引入之前要先安装了该插件，在package.json文件中有记录。</p>
<pre><code>/*引入Vue框架*/
import Vue from &#39;vue&#39;
/*引入资源请求插件*/
import VueResource from &#39;vue-resource&#39;
/*重置样式*/
import &quot;assets/css/base.css&quot;
/*基本JS*/
import &quot;assets/js/common.js&quot;
/*引入路由设置*/
import &quot;./routers.js&quot;
/*使用VueResource插件*/
Vue.use(VueResource)</code></pre>
<h3 id="5-App-vue"><a href="#5-App-vue" class="headerlink" title="5.App.vue"></a>5.App.vue</h3><p>这是一个标准的vue组件，包含三个部分，一个是模板，一个是script，一个是样式，这里需要了解vue的基础。</p>
<pre><code>&lt;template&gt;
  &lt;div id=&quot;app&quot;&gt;
    &lt;img src=&quot;./assets/logo.png&quot;&gt;
    &lt;hello&gt;&lt;/hello&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import Hello from &#39;./components/Hello&#39;

export default &#123;
  name: &#39;app&#39;,
  components: &#123;
    Hello
  &#125;
&#125;
&lt;/script&gt;

&lt;style&gt;
#app &#123;
  font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
&#125;
&lt;/style&gt;</code></pre>
<h3 id="总结说明"><a href="#总结说明" class="headerlink" title="总结说明"></a>总结说明</h3><p>我不是随便拿官方的demo放在这里，我是想说明，在webpack的配置文件里，设置了main.js是入口文件，我们的项目默认访问index.html，<br>这个文件里面<div id="app"></div>和App.vue组件里面的容器完美的重合了，也就是把组件挂载到了index页面，然后我们只需要去建设其他组件就好了，<br>在App组件中我们也可以引入，注册，应用其他组件，后面我会介绍如何通过路由将其他组件渲染在App组件，这样我们就只需要去关注每个组件的功能完善。</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://xianguoji.gitee.io/myblog/2017/01/12/2017-01-22-Vue.js%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84%E8%AF%B4%E6%98%8E/" data-id="ckds6fxa40009k8qcai2pda1j" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-2016-11-21-40条常见的移动端Web页面问题解决方案 " class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/myblog/2016/10/21/2016-11-21-40%E6%9D%A1%E5%B8%B8%E8%A7%81%E7%9A%84%E7%A7%BB%E5%8A%A8%E7%AB%AFWeb%E9%A1%B5%E9%9D%A2%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%20/" class="article-date">
  <time datetime="2016-10-20T16:00:00.000Z" itemprop="datePublished">2016-10-21</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/myblog/2016/10/21/2016-11-21-40%E6%9D%A1%E5%B8%B8%E8%A7%81%E7%9A%84%E7%A7%BB%E5%8A%A8%E7%AB%AFWeb%E9%A1%B5%E9%9D%A2%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%20/">40条常见的移动端Web页面问题解决方案</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="1、安卓浏览器看背景图片，有些设备会模糊。"><a href="#1、安卓浏览器看背景图片，有些设备会模糊。" class="headerlink" title="1、安卓浏览器看背景图片，有些设备会模糊。"></a>1、安卓浏览器看背景图片，有些设备会模糊。</h3><p>用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？</p>
<p>经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。</p>
<p>想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100100，背景图必须得200200，然后background-size:contain;，这样显示出来的图片就比较清晰了。</p>
<p>代码可以如下：</p>
<pre><code> background:url(../myblog/images/icon/all.png) no-repeat center center;
 -webkit-background-size:50px 50px;
 background-size: 50px 50px;
 display:inline-block;
 width:100%;
 height:50px;</code></pre>
<p>或者指定 background-size:contain;都可以，大家试试！</p>
<h3 id="2、图片加载"><a href="#2、图片加载" class="headerlink" title="2、图片加载"></a>2、图片加载</h3><p>若您遇到图片加载很慢的问题，对这种情况，手机开发一般用canvas方法加载：</p>
<p>具体的canvas API 参见：<a target="_blank" rel="noopener" href="http://javascript.ruanyifeng.com/htmlapi/canvas.html">http://javascript.ruanyifeng.com/htmlapi/canvas.html</a></p>
<p>下面举例说明一个canvas的例子：</p>
<pre><code>&lt;li&gt;&lt;canvas&gt;&lt;/canvas&gt;&lt;/li&gt;</code></pre>
<p>js动态加载图片和li 总共举例17张图片！</p>
<pre><code>var total = 17;
    var zWin = $(window);
    var render = function () &#123;
        var padding = 2;
        var winWidth = zWin.width();
        var picWidth = Math.floor((winWidth - padding * 3) / 4);
        var tmpl = &#39;&#39;;
        for (var i = 1; i &lt;= totla; i++) &#123;
            var p = padding;
            var imgSrc = &#39;img/&#39; + i + &#39;.jpg&#39;;
            if (i % 4 == 1) &#123;
                p = 0;
            &#125;
            tmpl += &#39;&lt;li style=&quot;width:&#39; + picWidth + &#39;px;height:&#39; + picWidth + &#39;px;padding-left:&#39; + p + &#39;px;padding-top:&#39; + padding + &#39;px;&quot;&gt;&lt;canvas id=&quot;cvs_&#39; + i + &#39;&quot;&gt;&lt;/canvas&gt;&lt;/li&gt;&#39;;
            var imageObj = new Image();
            imageObj.index = i;
            imageObj.onload = function () &#123;
                var cvs = $(&#39;#cvs_&#39; + this.index)[0].getContext(&#39;2d&#39;);
                cvs.width = this.width;
                cvs.height = this.height;
                cvs.drawImage(this, 0, 0);
            &#125;
            imageObj.src = imgSrc;
        &#125;
    &#125;
    render();</code></pre>
<h3 id="3、假如手机网站不用兼容IE浏览器，一般我们会使用zeptojs。"><a href="#3、假如手机网站不用兼容IE浏览器，一般我们会使用zeptojs。" class="headerlink" title="3、假如手机网站不用兼容IE浏览器，一般我们会使用zeptojs。"></a>3、假如手机网站不用兼容IE浏览器，一般我们会使用zeptojs。</h3><p>zeptojs内置Touch events方法，具体可以看[<a target="_blank" rel="noopener" href="http://zeptojs.com/#Touch">http://zeptojs.com/#Touch</a> events](<a target="_blank" rel="noopener" href="http://zeptojs.com/#Touch">http://zeptojs.com/#Touch</a> events)</p>
<p>看了一下zeptio新版的API，已经支持IE10以上浏览器，对zeptojs可以选择使用！</p>
<h3 id="4、防止手机中网页放大和缩小"><a href="#4、防止手机中网页放大和缩小" class="headerlink" title="4、防止手机中网页放大和缩小"></a>4、防止手机中网页放大和缩小</h3><p>这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport</p>
<p>还有就是，有些手机网站我们看到如下声明：</p>
<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//WAPFORUM//DTD XHTML Mobile 1.0//EN&quot; &quot;http://www.wapforum.org/DTD/xhtml-mobile10.dtd&quot;&gt;</code></pre>
<p>设置了DTD的方式是XHTML的写法，假如我们页面运用的是html5，可以不用设置DTD,直接声明<!DOCTYPE html>。</p>
<p>使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。</p>
<pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;user-scalable=0&quot; /&gt;</code></pre>
<p>但是为了更好的兼容，我们会使用完整的viewport设置:</p>
<pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0&quot; /&gt;</code></pre>
<p>当然，user-scalable=0,有的人也写成user-scalable=no，都可以的。</p>
<h3 id="5、apple-mobile-web-app-capable"><a href="#5、apple-mobile-web-app-capable" class="headerlink" title="5、apple-mobile-web-app-capable"></a>5、apple-mobile-web-app-capable</h3><p>apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。</p>
<p>语法：</p>
<pre><code>&lt;meta name=&quot;apple-mobile-web-app-capable&quot; content=&quot;yes&quot;&gt;</code></pre>
<p>说明：</p>
<p>如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。</p>
<h3 id="7、html5调用安卓或者ios的拨号功能"><a href="#7、html5调用安卓或者ios的拨号功能" class="headerlink" title="7、html5调用安卓或者ios的拨号功能"></a>7、html5调用安卓或者ios的拨号功能</h3><p>html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。</p>
<p>如下</p>
<pre><code>&lt;a href=&quot;tel:4008106999,1034&quot;&gt;400-810-6999 转 1034&lt;/a&gt;</code></pre>
<p>拨打手机直接如下</p>
<pre><code>&lt;a href=&quot;tel:15677776767&quot;&gt;点击拨打15677776767&lt;/a&gt;</code></pre>
<h3 id="8、html5GPS定位功能"><a href="#8、html5GPS定位功能" class="headerlink" title="8、html5GPS定位功能"></a>8、html5GPS定位功能</h3><p>具体请看：<a target="_blank" rel="noopener" href="http://www.jb51.net/post/html5_GPS_getCurrentPosition">http://www.jb51.net/post/html5_GPS_getCurrentPosition</a></p>
<h3 id="9、上下拉动滚动条时卡顿、慢"><a href="#9、上下拉动滚动条时卡顿、慢" class="headerlink" title="9、上下拉动滚动条时卡顿、慢"></a>9、上下拉动滚动条时卡顿、慢</h3><pre><code>body &#123;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
 &#125;</code></pre>
<p>Android3+和iOS5+支持CSS3的新属性为overflow-scrolling</p>
<h3 id="10、禁止复制、选中文本"><a href="#10、禁止复制、选中文本" class="headerlink" title="10、禁止复制、选中文本"></a>10、禁止复制、选中文本</h3><pre><code>Element &#123;
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
&#125;</code></pre>
<p>解决移动设备可选中页面文本(视产品需要而定)</p>
<h3 id="11、长时间按住页面出现闪退"><a href="#11、长时间按住页面出现闪退" class="headerlink" title="11、长时间按住页面出现闪退"></a>11、长时间按住页面出现闪退</h3><pre><code>element &#123;
   -webkit-touch-callout: none;
&#125;</code></pre>
<h3 id="12、iphone及ipad下输入框默认内阴影"><a href="#12、iphone及ipad下输入框默认内阴影" class="headerlink" title="12、iphone及ipad下输入框默认内阴影"></a>12、iphone及ipad下输入框默认内阴影</h3><pre><code>Element&#123;
   -webkit-appearance: none;
&#125;</code></pre>
<h3 id="13、ios和android下触摸元素时出现半透明灰色遮罩"><a href="#13、ios和android下触摸元素时出现半透明灰色遮罩" class="headerlink" title="13、ios和android下触摸元素时出现半透明灰色遮罩"></a>13、ios和android下触摸元素时出现半透明灰色遮罩</h3><pre><code>Element &#123;
   -webkit-tap-highlight-color:rgba(255,255,255,0);
&#125;</code></pre>
<p>设置alpha值为0就可以去除半透明灰色遮罩，备注：transparent的属性值在android下无效。</p>
<p>后面一篇文章有详细介绍，地址：<a target="_blank" rel="noopener" href="http://www.jb51.net/post/phone_web_ysk">http://www.jb51.net/post/phone_web_ysk</a></p>
<h3 id="14、active兼容处理-即-伪类-active-失效"><a href="#14、active兼容处理-即-伪类-active-失效" class="headerlink" title="14、active兼容处理 即 伪类 :active 失效"></a>14、active兼容处理 即 伪类 :active 失效</h3><p>方法一：body添加ontouchstart</p>
<pre><code>&lt;body ontouchstart=&quot;&quot;&gt;</code></pre>
<p>方法二：js给 document 绑定 touchstart 或 touchend 事件</p>
<pre><code>&lt;style&gt;
a &#123;
    color: #000;
&#125;

a:active &#123;
    color: #fff;
&#125;
&lt;/style&gt;

 &lt;a herf=foo&gt;bar&lt;/a&gt;
&lt;script&gt;  document.addEventListener(&#39;touchstart&#39;, function () &#123;&#125;, false); &lt;/script&gt;</code></pre>
<h3 id="15、动画定义3D启用硬件加速"><a href="#15、动画定义3D启用硬件加速" class="headerlink" title="15、动画定义3D启用硬件加速"></a>15、动画定义3D启用硬件加速</h3><pre><code>Element &#123;   -webkit-transform:translate3d(0, 0, 0)   transform: translate3d(0, 0, 0); &#125;</code></pre>
<p>注意：3D变形会消耗更多的内存与功耗</p>
<h3 id="16、Retina屏的1px边框"><a href="#16、Retina屏的1px边框" class="headerlink" title="16、Retina屏的1px边框"></a>16、Retina屏的1px边框</h3><pre><code>Element&#123;   border-width: thin; &#125;</code></pre>
<h3 id="17、webkit-mask-兼容处理"><a href="#17、webkit-mask-兼容处理" class="headerlink" title="17、webkit mask 兼容处理"></a>17、webkit mask 兼容处理</h3><p>某些低端手机不支持css3 mask，可以选择性的降级处理。</p>
<p>比如可以使用js判断来引用不同class：</p>
<pre><code>if( &#39;WebkitMask&#39; in document.documentElement.style)&#123;
  alert(&#39;支持mask&#39;);
 &#125; else &#123;
    alert(&#39;不支持mask&#39;);
   &#125;</code></pre>
<h3 id="18、旋转屏幕时，字体大小调整的问题"><a href="#18、旋转屏幕时，字体大小调整的问题" class="headerlink" title="18、旋转屏幕时，字体大小调整的问题"></a>18、旋转屏幕时，字体大小调整的问题</h3><pre><code>html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 &#123;   -webkit-text-size-adjust:100%; &#125;</code></pre>
<h3 id="19、transition闪屏"><a href="#19、transition闪屏" class="headerlink" title="19、transition闪屏"></a>19、transition闪屏</h3><pre><code>/设置内嵌的元素在 3D 空间如何呈现：保留3D /
-webkit-transform-style: preserve-3d;
/ 设置进行转换的元素的背面在面对用户时是否可见：隐藏 /
 -webkit-backface-visibility:hidden;</code></pre>
<h3 id="20、圆角bug"><a href="#20、圆角bug" class="headerlink" title="20、圆角bug"></a>20、圆角bug</h3><p>某些Android手机圆角失效</p>
<pre><code>background-clip: padding-box;</code></pre>
<h3 id="21、顶部状态栏背景色"><a href="#21、顶部状态栏背景色" class="headerlink" title="21、顶部状态栏背景色"></a>21、顶部状态栏背景色</h3><pre><code>&lt;meta name=&quot;apple-mobile-web-app-status-bar-style&quot; content=&quot;black&quot; /&gt;</code></pre>
<p>说明：</p>
<p>除非你先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作用。</p>
<p>如果content设置为default，则状态栏正常显示。如果设置为blank，则状态栏会有一个黑色的背景。如果设置为blank-translucent，则状态栏显示为黑色半透明。如果设置为default或blank，则页面显示在状态栏的下方，即状态栏占据上方部分，页面占据下方部分，二者没有遮挡对方或被遮挡。如果设置为blank-translucent，则页面会充满屏幕，其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px）。默认值是default。</p>
<h3 id="22、设置缓存"><a href="#22、设置缓存" class="headerlink" title="22、设置缓存"></a>22、设置缓存</h3><pre><code>&lt;meta http-equiv=&quot;Cache-Control&quot; content=&quot;no-cache&quot; /&gt;</code></pre>
<p>手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。</p>
<h3 id="24、启动画面"><a href="#24、启动画面" class="headerlink" title="24、启动画面"></a>24、启动画面</h3><pre><code>&lt;link rel=&quot;apple-touch-startup-image&quot; href=&quot;start.png&quot;/&gt;</code></pre>
<p>iOS下页面启动加载时显示的画面图片，避免加载时的白屏。</p>
<p>可以通过madia来指定不同的大小：</p>
<pre><code>&lt;!--iPhone--&gt;
&lt;link href=&quot;apple-touch-startup-image-320x460.png&quot; media=&quot;(device-width: 320px)&quot;rel=&quot;apple-touch-startup-image&quot;/&gt;   &lt;!-- iPhone Retina --&gt;

&lt;link href=&quot;apple-touch-startup-image-640x920.png&quot; media=&quot;(device-width: 320px) and (-webkit-device-pixel-ratio: 2)&quot;rel=&quot;apple-touch-startup-image&quot;/&gt;   &lt;!-- iPhone 5 --&gt;

&lt;link rel=&quot;apple-touch-startup-image&quot;media=&quot;(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)&quot; href=&quot;apple-touch-startup-image-640x1096.png&quot;&gt;   &lt;!-- iPad portrait --&gt;

&lt;link href=&quot;apple-touch-startup-image-768x1004.png&quot; media=&quot;(device-width: 768px) and (orientation: portrait)&quot;rel=&quot;apple-touch-startup-image&quot;/&gt;   &lt;!-- iPad landscape --&gt;

&lt;link href=&quot;apple-touch-startup-image-748x1024.png&quot; media=&quot;(device-width: 768px) and (orientation: landscape)&quot;rel=&quot;apple-touch-startup-image&quot;/&gt;   &lt;!-- iPad Retina portrait --&gt;

&lt;link href=&quot;apple-touch-startup-image-1536x2008.png&quot;media=&quot;(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)&quot;rel=&quot;apple-touch-startup-image&quot;/&gt;   &lt;!-- iPad Retina landscape --&gt;

&lt;link href=&quot;apple-touch-startup-image-1496x2048.png&quot;media=&quot;(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)&quot;rel=&quot;apple-touch-startup-image&quot;/&gt;</code></pre>
<h3 id="25、浏览器私有及其它meta"><a href="#25、浏览器私有及其它meta" class="headerlink" title="25、浏览器私有及其它meta"></a>25、浏览器私有及其它meta</h3><p>以下属性在项目中没有应用过，可以写一个demo测试以下！</p>
<p>QQ浏览器私有</p>
<pre><code>全屏模式
&lt;meta name=&quot;x5-fullscreen&quot; content=&quot;true&quot;&gt;

强制竖屏
&lt;meta name=&quot;x5-orientation&quot; content=&quot;portrait&quot;&gt;

强制横屏
&lt;meta name=&quot;x5-orientation&quot; content=&quot;landscape&quot;&gt;

应用模式
&lt;meta name=&quot;x5-page-mode&quot; content=&quot;app&quot;&gt;</code></pre>
<p>UC浏览器私有</p>
<pre><code>全屏模式
&lt;meta name=&quot;full-screen&quot; content=&quot;yes&quot;&gt;

强制竖屏
&lt;meta name=&quot;screen-orientation&quot; content=&quot;portrait&quot;&gt;

强制横屏
&lt;meta name=&quot;screen-orientation&quot; content=&quot;landscape&quot;&gt;

应用模式
&lt;meta name=&quot;browsermode&quot; content=&quot;application&quot;&gt;</code></pre>
<p>其它<br>    针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓</p>
<pre><code>&lt;meta name=&quot;HandheldFriendly&quot; content=&quot;true&quot;&gt;</code></pre>
<p>微软的老式浏览器</p>
<pre><code>&lt;meta name=&quot;MobileOptimized&quot; content=&quot;320&quot;&gt;</code></pre>
<p>windows phone 点击无高光</p>
<pre><code>&lt;meta name=&quot;msapplication-tap-highlight&quot; content=&quot;no&quot;&gt;</code></pre>
<h3 id="26、-IOS中input键盘事件keyup、keydown、keypress支持不是很好"><a href="#26、-IOS中input键盘事件keyup、keydown、keypress支持不是很好" class="headerlink" title="26、 IOS中input键盘事件keyup、keydown、keypress支持不是很好"></a>26、 IOS中input键盘事件keyup、keydown、keypress支持不是很好</h3><p>问题是这样的，用input search做模糊搜索的时候，在键盘里面输入关键词，会通过ajax后台查询，然后返回数据，然后再对返回的数据进行关键词标红。用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中变红很慢，用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才能相应！</p>
<p>解决办法：</p>
<p>可以用html5的oninput事件去代替keyup</p>
<pre><code>&lt;input type=&quot;text&quot; id=&quot;testInput&quot;&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    document.getElementById(&#39;testInput&#39;).addEventListener(&#39;input&#39;, function (e) &#123;
        var value = e.target.value;
    &#125;);
&lt;/script&gt;</code></pre>
<p>然后就达到类似keyup的效果！</p>
<h3 id="27、h5网站input-设置为type-number的问题"><a href="#27、h5网站input-设置为type-number的问题" class="headerlink" title="27、h5网站input 设置为type=number的问题"></a>27、h5网站input 设置为type=number的问题</h3><p>h5网页input 的type设置为number一般会产生三个问题，一个问题是maxlength属性不好用了。另外一个是form提交的时候，默认给取整了。三是部分安卓手机出现样式问题。</p>
<p>问题一解决，我目前用的是js。如下</p>
<pre><code>&lt;input type=&quot;number&quot; oninput=&quot;checkTextLength(this ,10)&quot;&gt;

function checkTextLength(obj, length) &#123;
        if (obj.value.length &gt; length) &#123;
            obj.value = obj.value.substr(0, length);
        &#125;
    &#125;</code></pre>
<p>问题二，是因为form提交默认做了表单验证，step默认是1,要设置step属性，假如保留2位小数，写法如下：</p>
<pre><code>&lt;input type=&quot;number&quot; step=&quot;0.01&quot; /&gt;</code></pre>
<p>关于step，我在这里做简单的介绍，input 中type=number，一般会自动生成一个上下箭头，点击上箭头默认增加一个step，点击下箭头默认会减少一个step。number中默认step是1。也就是step=0.01,可以允许输入2位小数，并且点击上下箭头分别增加0.01和减少0.01。</p>
<p>假如step和min一起使用，那么数值必须在min和max之间。</p>
<p>看下面的例子：<br>     <input type="number" step="3.1" min="1" /></p>
<pre><code> &lt;input type=&quot;number&quot; step=&quot;3.1&quot; min=&quot;1&quot; /&gt;</code></pre>
<p>输入框可以输入哪些数字？</p>
<p>首先，最小值是1，那么可以输入1.0，第二个是可以输入（1+3.1）那就是4.1,以此类推，每次点击上下箭头都会增加或者减少3.1，输入其他数字无效。这就是step的简单介绍。</p>
<p>问题三，去除input默认样式</p>
<pre><code>input[type=number] &#123;
        -moz-appearance: textfield;
    &#125;

    input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button &#123;
        -webkit-appearance: none;
        margin: 0;
    &#125;</code></pre>
<h3 id="28、ios-设置input-按钮样式会被默认样式覆盖"><a href="#28、ios-设置input-按钮样式会被默认样式覆盖" class="headerlink" title="28、ios 设置input 按钮样式会被默认样式覆盖"></a>28、ios 设置input 按钮样式会被默认样式覆盖</h3><p>解决方式如下：</p>
<pre><code>input, textarea &#123;
        border: 0;
        -webkit-appearance: none;
 &#125;</code></pre>
<p>设置默认样式为none</p>
<h3 id="29、IOS键盘字母输入，默认首字母大写"><a href="#29、IOS键盘字母输入，默认首字母大写" class="headerlink" title="29、IOS键盘字母输入，默认首字母大写"></a>29、IOS键盘字母输入，默认首字母大写</h3><p>解决方案，设置如下属性</p>
<pre><code> &lt;input type=&quot;text&quot; autocapitalize=&quot;off&quot; /&gt;</code></pre>
<h3 id="30、select-下拉选择设置右对齐"><a href="#30、select-下拉选择设置右对齐" class="headerlink" title="30、select 下拉选择设置右对齐"></a>30、select 下拉选择设置右对齐</h3><p>设置如下：</p>
<pre><code>select option &#123;
    direction: rtl;
 &#125;</code></pre>
<h3 id="31、通过transform进行skew变形，rotate旋转会造成出现锯齿现象"><a href="#31、通过transform进行skew变形，rotate旋转会造成出现锯齿现象" class="headerlink" title="31、通过transform进行skew变形，rotate旋转会造成出现锯齿现象"></a>31、通过transform进行skew变形，rotate旋转会造成出现锯齿现象</h3><p>可以设置如下：</p>
<pre><code>    -webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
    transform: rotate(-4deg) skew(10deg) translateZ(0);
    outline: 1px solid rgba(255,255,255,0)</code></pre>
<h3 id="32、移动端点击300ms延迟"><a href="#32、移动端点击300ms延迟" class="headerlink" title="32、移动端点击300ms延迟"></a>32、移动端点击300ms延迟</h3><p>300ms尚可接受，不过因为300ms产生的问题，我们必须要解决。300ms导致用户体验并不是很好，解决这个问题，我们一般在移动端用tap事件来取代click事件。</p>
<p>推荐两个js，一个是fastclick，一个是tap.js</p>
<p>关于300ms延迟，具体请看：<a target="_blank" rel="noopener" href="http://thx.github.io/mobile/300ms-click-delay/">http://thx.github.io/mobile/300ms-click-delay/</a></p>
<h3 id="33、移动端点透问题"><a href="#33、移动端点透问题" class="headerlink" title="33、移动端点透问题"></a>33、移动端点透问题</h3><p>案例如下：</p>
<pre><code>&lt;div id=&quot;haorooms&quot;&gt;点头事件测试&lt;/div&gt;
&lt;a href=&quot;www.jb51.net&quot;&gt;www.jb51.net&lt;/a&gt;</code></pre>
<p>div是绝对定位的蒙层,并且z-index高于a。而a标签是页面中的一个链接，我们给div绑定tap事件：</p>
<pre><code>$(&#39;#haorooms&#39;).on(&#39;tap&#39;, function () &#123;
        $(&#39;#haorooms&#39;).hide();
    &#125;)</code></pre>
<p>我们点击蒙层时 div正常消失，但是当我们在a标签上点击蒙层时，发现a链接被触发，这就是所谓的点透事件。</p>
<p>原因：</p>
<p>touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的，这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏， 此时 click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接上。</p>
<h4 id="解决："><a href="#解决：" class="headerlink" title="解决："></a>解决：</h4><p>（1）尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。</p>
<p>（2）用fastclick，<a target="_blank" rel="noopener" href="https://github.com/ftlabs/fastclick">https://github.com/ftlabs/fastclick</a></p>
<p>（3）用preventDefault阻止a标签的click。</p>
<p>（4）延迟一定的时间(300ms+)来处理事件 （不推荐）。</p>
<p>（5）以上一般都能解决，实在不行就换成click事件。</p>
<p>下面介绍一下touchend事件，如下：</p>
<pre><code>$(&quot;#haorooms&quot;).on(&quot;touchend&quot;, function (event) &#123;
    event.preventDefault();
 &#125;);</code></pre>
<h3 id="34、消除-IE10-里面的那个叉号"><a href="#34、消除-IE10-里面的那个叉号" class="headerlink" title="34、消除 IE10 里面的那个叉号"></a>34、消除 IE10 里面的那个叉号</h3><pre><code> input:-ms-clear&#123;display:none;&#125;</code></pre>
<h3 id="35、关于-iOS-与-OS-X-端字体的优化-横竖屏会出现字体加粗不一致等"><a href="#35、关于-iOS-与-OS-X-端字体的优化-横竖屏会出现字体加粗不一致等" class="headerlink" title="35、关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)"></a>35、关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)</h3><p>iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决 iOS 上的问题，但桌面版 Safari 的字体缩放功能会失效，因此最佳方案是将 text-size-adjust 为 100% 。</p>
<pre><code>-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;</code></pre>
<h3 id="36、关于-iOS-系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格"><a href="#36、关于-iOS-系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格" class="headerlink" title="36、关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格"></a>36、关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格</h3><p>可以通过正则去掉</p>
<pre><code> this.value = this.value.replace(/\u2006/g, &#39;&#39;);</code></pre>
<h3 id="37、移动端-HTML5-audio-autoplay-失效问题"><a href="#37、移动端-HTML5-audio-autoplay-失效问题" class="headerlink" title="37、移动端 HTML5 audio autoplay 失效问题"></a>37、移动端 HTML5 audio autoplay 失效问题</h3><p>这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。</p>
<p>解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。</p>
<p>解决代码：</p>
<pre><code>document.addEventListener(&#39;touchstart&#39;, function () &#123;
        document.getElementsByTagName(&#39;audio&#39;)[0].play();
        document.getElementsByTagName(&#39;audio&#39;)[0].pause();
&#125;);</code></pre>
<h3 id="38、移动端-HTML5-input-date-不支持-placeholder-问题"><a href="#38、移动端-HTML5-input-date-不支持-placeholder-问题" class="headerlink" title="38、移动端 HTML5 input date 不支持 placeholder 问题"></a>38、移动端 HTML5 input date 不支持 placeholder 问题</h3><p>这个我感觉没有什么好的解决方案，用如下方法</p>
<pre><code>&lt;input placeholder=&quot;Date&quot; class=&quot;textbox-n&quot; type=&quot;text&quot; onfocus=&quot;(this.type=&#39;date&#39;)&quot;  id=&quot;date&quot;&gt;</code></pre>
<h3 id="39、部分机型存在type为search的input，自带close按钮样式修改方法"><a href="#39、部分机型存在type为search的input，自带close按钮样式修改方法" class="headerlink" title="39、部分机型存在type为search的input，自带close按钮样式修改方法"></a>39、部分机型存在type为search的input，自带close按钮样式修改方法</h3><p>有些机型的搜索input控件会自带close按钮（一个伪元素），而通常为了兼容所有浏览器，我们会自己实现一个，此时去掉原生close按钮的方法为</p>
<pre><code>#Search::-webkit-search-cancel-button&#123;
   display: none;
&#125;</code></pre>
<p>如果想使用原生close按钮，又想使其符合设计风格，可以对这个伪元素的样式进行修改。</p>
<h3 id="40、唤起select的option展开"><a href="#40、唤起select的option展开" class="headerlink" title="40、唤起select的option展开"></a>40、唤起select的option展开</h3><p>zepto方式:</p>
<pre><code>$(sltElement).trrgger(&quot;mousedown&quot;);</code></pre>
<p>原生js方式:</p>
<pre><code>function showDropdown(sltElement) &#123;
        var event;
        event = document.createEvent(&#39;MouseEvents&#39;);
        event.initMouseEvent(&#39;mousedown&#39;, true, true, window);
        sltElement.dispatchEvent(event);
 &#125;;</code></pre>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://xianguoji.gitee.io/myblog/2016/10/21/2016-11-21-40%E6%9D%A1%E5%B8%B8%E8%A7%81%E7%9A%84%E7%A7%BB%E5%8A%A8%E7%AB%AFWeb%E9%A1%B5%E9%9D%A2%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%20/" data-id="ckds6fxak001bk8qcd591bf9o" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/myblog/tags/%E7%A7%BB%E5%8A%A8%E7%AB%AF/" rel="tag">移动端</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-2016-10-17-rem适配-for-iphone" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/myblog/2016/10/17/2016-10-17-rem%E9%80%82%E9%85%8D-for-iphone/" class="article-date">
  <time datetime="2016-10-16T16:00:00.000Z" itemprop="datePublished">2016-10-17</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/myblog/2016/10/17/2016-10-17-rem%E9%80%82%E9%85%8D-for-iphone/">rem适配-for-iphone</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>移动端采用 rem 布局方式。通过动态修改 html 的 font-size 实现自适应。</p>
<h3 id="实现方式"><a href="#实现方式" class="headerlink" title="实现方式"></a>实现方式</h3><p>REM 布局有两种实现方式：CSS 媒介查询和 JavaScript 动态修改。由于 JavaScript 更为灵活，因此现在更多地采用此方式。</p>
<p>我的实现方式是：在 head 标签末加入以下代码：</p>
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
    !function()&#123;
      var maxWidth=750;
      document.write(&#39;&lt;style id=&quot;o2HtmlFontSize&quot;&gt;&lt;/style&gt;&#39;);
      var o2_resize=function()&#123;
          var cw,ch;
          if(document&amp;&amp;document.documentElement)&#123;
              cw=document.documentElement.clientWidth,ch=document.documentElement.clientHeight;
          &#125;
          if(!cw||!ch)&#123;
              if(window.localStorage[&quot;o2-cw&quot;]&amp;&amp;window.localStorage[&quot;o2-ch&quot;])&#123;
                  cw=parseInt(window.localStorage[&quot;o2-cw&quot;]),ch=parseInt(window.localStorage[&quot;o2-ch&quot;]);
              &#125;else&#123;
                  chk_cw();//定时检查
                  return ;//出错了
              &#125;
          &#125;
          var zoom=maxWidth&amp;&amp;maxWidth&lt;cw?maxWidth/375:cw/375,zoomY=ch/603;//由ip6 weChat
          window.localStorage[&quot;o2-cw&quot;]=cw,window.localStorage[&quot;o2-ch&quot;]=ch;
          //zoom=Math.min(zoom,zoomY);//保证ip6 wechat的显示比率
          window.zoom=window.o2Zoom=zoom;
          document.getElementById(&quot;o2HtmlFontSize&quot;).innerHTML=&#39;html&#123;font-size:&#39;+(zoom*20)+&#39;px;&#125;.o2-zoom,.zoom&#123;zoom:&#39;+(zoom/2)+&#39;;&#125;.o2-scale&#123;-webkit-transform: scale(&#39;+zoom/2+&#39;); transform: scale(&#39;+zoom/2+&#39;);&#125; .sq_sns_pic_item,.sq_sns_picmod_erea_img&#123;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scale(&#39;+zoom/2+&#39;);transform: scale(&#39;+zoom/2+&#39;);&#125;&#39;;
      &#125;,
      siv,
      chk_cw=function()&#123;
          if(siv)return ;//已经存在
          siv=setInterval(function()&#123;
              //定时检查
              document&amp;&amp;document.documentElement&amp;&amp;document.documentElement.clientWidth&amp;&amp;document.documentElement.clientHeight&amp;&amp;(o2_resize(),clearInterval(siv),siv=undefined);
          &#125;,100);
      &#125;;
      o2_resize();//立即初始化
      window.addEventListener(&quot;resize&quot;,o2_resize);
  &#125;();
  &lt;/script&gt;</code></pre>
<h3 id="从以上代码可得出以下信息："><a href="#从以上代码可得出以下信息：" class="headerlink" title="从以上代码可得出以下信息："></a>从以上代码可得出以下信息：</h3><p>1.以 iPhone 6 为基准，iPhone 6 的缩放比 zoom 为 1</p>
<p>2.由于只针对移动端，因此最大宽度为768（恰好等于 iPad 的竖屏宽度）</p>
<p>3.通过 document.documentElement.clientWidth 获取视口宽度</p>
<p>4.resize 事件主要考虑横竖屏切换和你在PC上调试时</p>
<p>5.oom 系数是 20。系数决定了在宽度 375 的 iPhone6 下，1 rem 的值是多少 px（20px）。当然如果想过渡到 vw，可以将 zoom 系数设置为 3.75，那么 100rem 就是 375px 了</p>
<h3 id="哪些地方要用"><a href="#哪些地方要用" class="headerlink" title="哪些地方要用"></a>哪些地方要用</h3><p>由于 rem 布局是相对于视口宽度，因此任何需要根据屏幕大小进行变化的元素（width、height、position 等）都可以用 rem 单位。</p>
<p>但 rem 也有它的缺点——不精细（在下一节阐述），其实这涉及到了浏览器渲染引擎的处理。因此，对于需要精细处理的地方（如通过 CSS 实现的 icon），可以用 px 等绝对单位，然后再通过 transform: scale() 方法等比缩放。</p>
<h3 id="字体"><a href="#字体" class="headerlink" title="字体"></a>字体</h3><p>那 font-size 是否也要用 rem 单位呢？ 这也是我曾经纠结的地方。如果不等比缩放，对不起设计师，而且对于小屏幕，一些元素内的字体会换行或溢出。当然这可以通过 CSS3 媒介查询解决这种状况。</p>
<p>字体不采用 rem 的好处是：在大屏手机下，能显示更多字体。</p>
<p>看到 网易新闻 和 聚划算 的字体大小都采用 rem 单位，我就不纠结了。当然，也有其它网站是采用绝对单位的，两者没有绝对的对与错，取决于你的实际情况。</p>
<h3 id="缺点"><a href="#缺点" class="headerlink" title="缺点"></a>缺点</h3><h4 id="小数点（不精细，有间隙）"><a href="#小数点（不精细，有间隙）" class="headerlink" title="小数点（不精细，有间隙）"></a>小数点（不精细，有间隙）</h4><p>由于 rem 布局是基于某一设备实现的（目前一般采用 iPhone6），对于 375 倍数宽的设备无疑会拥有最佳的显示效果。而对于非 375 倍数宽的设备，zoom 就可能是拥有除不尽的小数，根元素的字体大小也相应会有小数。而浏览器对小数的处理方式不一致，导致该居中的地方没完全居中，但你又不能为此设置特定样式（如 margin-top: *px;），因为浏览器多如牛毛，这个浏览器微调居中了，而原本居中的浏览器变得不居中了。</p>
<p>对于图标 icon，rem 的不精细导致通过多个元素（伪元素）组合而成的 icon 会形成错位/偏差。因此，在这种情况下，需要权衡是否需要使用 CSS 实现了。</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://xianguoji.gitee.io/myblog/2016/10/17/2016-10-17-rem%E9%80%82%E9%85%8D-for-iphone/" data-id="ckds6fxa10004k8qc79gjbwhh" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/myblog/tags/rem/" rel="tag">rem</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-2016-10-4-HTML5预加载、预渲染" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/myblog/2016/10/04/2016-10-4-HTML5%E9%A2%84%E5%8A%A0%E8%BD%BD%E3%80%81%E9%A2%84%E6%B8%B2%E6%9F%93/" class="article-date">
  <time datetime="2016-10-03T16:00:00.000Z" itemprop="datePublished">2016-10-04</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/myblog/2016/10/04/2016-10-4-HTML5%E9%A2%84%E5%8A%A0%E8%BD%BD%E3%80%81%E9%A2%84%E6%B8%B2%E6%9F%93/">HTML5预加载、预渲染</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>prefetch 即预加载，在用户需要前我们就将所需的资源加载完毕。</p>
<p>有了浏览器缓存，为何还需要预加载？</p>
<p>用户可能是第一次访问网站，此时还无缓存</p>
<p>用户可能清空了缓存</p>
<p>缓存可能已经过期，资源将重新加载</p>
<p>用户访问的缓存文件可能不是最新的，需要重新加载</p>
<p>Chrome 的预加载技术</p>
<p>现在的 chrome 聪明到根据你的浏览记录，预测到你可能访问或搜索哪些网站，在你打开网站之前就加载好了一些资源了。</p>
<p>举个栗子，当你在搜索框输入 “amaz” 时，它猜测到你可能要访问 amazon.com，可能就帮你加载了这个网站的一些资源。</p>
<p>如果这个预测算法精准的话，就能大大地提高用户的浏览体验了。</p>
<p>DNS prefetch<br>我们知道，当我们访问一个网站如 <a target="_blank" rel="noopener" href="http://www.amazon.com/">www.amazon.com</a> 时，需要将这个域名先转化为对应的 IP 地址，这是一个非常耗时的过程。</p>
<p>DNS prefetch 分析这个页面需要的资源所在的域名，浏览器空闲时提前将这些域名转化为 IP 地址，真正请求资源时就避免了上述这个过程的时间。</p>
<pre><code>&lt;meta http-equiv=&#39;x-dns-prefetch-control&#39; content=&#39;on&#39;&gt;
&lt;link rel=&#39;dns-prefetch&#39; href=&#39;http://g-ecx.images-amazon.com&#39;&gt;
&lt;link rel=&#39;dns-prefetch&#39; href=&#39;http://z-ecx.images-amazon.com&#39;&gt;
&lt;link rel=&#39;dns-prefetch&#39; href=&#39;http://ecx.images-amazon.com&#39;&gt;
&lt;link rel=&#39;dns-prefetch&#39; href=&#39;http://completion.amazon.com&#39;&gt;
&lt;link rel=&#39;dns-prefetch&#39; href=&#39;http://fls-na.amazon.com&#39;&gt;</code></pre>
<p>应用场景1：我们的资源存在在不同的 CDN 中，那提前声明好这些资源的域名，就可以节省请求发生时产生的域名解析的时间。</p>
<p>应用场景2：如果我们知道用户接下来的操作一定会发起一起资源的请求，那就可以将这个资源进行 DNS-Prefetch，加强用户体验。</p>
<p>Resource prefetch</p>
<p>在 Chrome 下，我们可以用 link标签声明特定文件的预加载：</p>
<pre><code>&lt;link rel=&#39;subresource&#39; href=&#39;critical.js&#39;&gt;
&lt;link rel=&#39;subresource&#39; href=&#39;main.css&#39;&gt;
&lt;link rel=&#39;prefetch&#39; href=&#39;secondary.js&#39;&gt;</code></pre>
<p>在 Firefox 中或用 meta 标签声明：</p>
<pre><code>&lt;meta http-equiv=&quot;Link&quot; content=&quot;&lt;critical.js&gt;; rel=prefetch&quot;&gt;</code></pre>
<p>rel=’subresource’ 表示当前页面必须加载的资源，应该放到页面最顶端先加载，有最高的优先级。</p>
<p>rel=’prefetch’ 表示当 subresource 所有资源都加载完后，开始预加载这里指定的资源，有最低的优先级。</p>
<p>注意：只有可缓存的资源才进行预加载，否则浪费资源！</p>
<p>Pre render</p>
<p>前面说到的预解析DNS、预加载资源已经够强悍了有木有，可还有更厉害的预渲染（Pre-rendering）！</p>
<p>预渲染意味着我们提前加载好用户即将访问的下一个页面，否则进行预渲染这个页面将浪费资源，慎用！</p>
<pre><code>&lt;link rel=&#39;prerender&#39; href=&#39;http://www.pagetoprerender.com&#39;&gt;</code></pre>
<p>rel=’prerender’ 表示浏览器会帮我们渲染但隐藏指定的页面，一旦我们访问这个页面，则秒开了！</p>
<p>在 Firefox 中或用 rel=’next’ 来声明</p>
<pre><code>&lt;link rel=&quot;next&quot; href=&quot;http://www.pagetoprerender.com&quot;&gt;</code></pre>
<p>不是所有的资源都可以预加载</p>
<p>当资源为以下列表中的资源时，将阻止预渲染操作：</p>
<p>URL 中包含下载资源</p>
<p>页面中包含音频、视频</p>
<p>POST、PUT 和 DELETE 操作的 ajax 请求</p>
<p>HTTP 认证(Authentication)</p>
<p>HTTPS 页面</p>
<p>含恶意软件的页面</p>
<p>弹窗页面</p>
<p>占用资源很多的页面</p>
<p>打开了 chrome developer tools 开发工具</p>
<p>手动触发预渲染操作</p>
<p>在 head 中强势插入 link[rel=’prerender’] 即可：</p>
<pre><code>var hint =document.createElement(&quot;link&quot;)
hint.setAttribute(“rel”,”prerender”)
hint.setAttribute(“href”,”next-page.html”)
document.getElementsByTagName(“head”)[0].appendChild(hint)</code></pre>
<p>兼容性</p>
<p>这么好用的特性，当然要考虑各浏览器的兼容程度了(哭：</p>
<p>IE9 支持 DNS pre-fetching 但管它叫 prefetch。</p>
<p>IE10+ 中 dns-prefetch 和 prefetch 是等价的。</p>
<p>其他方面的测试，目前还没有很好的方案，暂且只能通过查看浏览器是否缓存来测试。</p>
<p>在 Chrome 中打开了 chrome developer tools 开发工具会阻止页面的预渲染，所以我们看不到这个过程，但可以在 chrome://cache/ 或 chrome://net-internals/#prerender 中查看。</p>
<p>Firefox 可以在 about:cache 中查看。</p>
<p>警告</p>
<p>这些特定还是实验性质的，将来可能改变。</p>
<p>权利越大，责任越大，不要滥用！</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://xianguoji.gitee.io/myblog/2016/10/04/2016-10-4-HTML5%E9%A2%84%E5%8A%A0%E8%BD%BD%E3%80%81%E9%A2%84%E6%B8%B2%E6%9F%93/" data-id="ckds6fxa30008k8qcc6dydbxd" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/myblog/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" rel="tag">性能优化</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-2016-09-20-好用的几个前端webUI框架" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/myblog/2016/09/20/2016-09-20-%E5%A5%BD%E7%94%A8%E7%9A%84%E5%87%A0%E4%B8%AA%E5%89%8D%E7%AB%AFwebUI%E6%A1%86%E6%9E%B6/" class="article-date">
  <time datetime="2016-09-19T16:00:00.000Z" itemprop="datePublished">2016-09-20</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/myblog/2016/09/20/2016-09-20-%E5%A5%BD%E7%94%A8%E7%9A%84%E5%87%A0%E4%B8%AA%E5%89%8D%E7%AB%AFwebUI%E6%A1%86%E6%9E%B6/">好用的几个前端webUI框架</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="1-Aliceui"><a href="#1-Aliceui" class="headerlink" title="1.Aliceui"></a>1.Aliceui</h3><p>Aliceui是支付宝的样式解决方案，是一套精选的基于 spm 生态圈的样式模块集合，是 Arale 的子集，也是一套模块化的样式命名和组织规范，是写 CSS 的更好方式。</p>
<p>gitHub地址：<a target="_blank" rel="noopener" href="https://github.com/aliceui/aliceui.github.io">https://github.com/aliceui/aliceui.github.io</a></p>
<h3 id="2-Amazeui"><a href="#2-Amazeui" class="headerlink" title="2.Amazeui"></a>2.Amazeui</h3><p>Amaze UI 是一个轻量级、 Mobile first 的前端框架, 基于开源社区流行前端框架编写的。</p>
<p>官网地址：<a target="_blank" rel="noopener" href="http://amazeui.org/">http://amazeui.org/</a></p>
<h3 id="3-sui"><a href="#3-sui" class="headerlink" title="3.sui"></a>3.sui</h3><p>SUI是一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。</p>
<p>通过SUI，可以非常方便的设计和实现精美的页面。</p>
<p>官网地址：<a target="_blank" rel="noopener" href="http://sui.taobao.org/">http://sui.taobao.org/</a></p>
<p>同时sui还有移动端版本msui，msui是阿里巴巴共享业务事业部UED团队的作品。目的是为了手机H5页面提供一个常用的组件库，减少重复工作。</p>
<p>地址：<a target="_blank" rel="noopener" href="http://m.sui.taobao.org/">http://m.sui.taobao.org/</a></p>
<h3 id="4-FrozeUI"><a href="#4-FrozeUI" class="headerlink" title="4.FrozeUI"></a>4.FrozeUI</h3><p>Frozen UI是一个开源的简单易用，轻量快捷的移动端UI框架。基于手Q样式规范，选取最常用的组件，做成手Q公用离线包减少请求，升级方式友好，文档完善，目前全面应用在腾讯手Q增值业务中。</p>
<p>官网地址：<a target="_blank" rel="noopener" href="http://frozenui.github.io/">http://frozenui.github.io/</a></p>
<h3 id="5-uiKit"><a href="#5-uiKit" class="headerlink" title="5.uiKit"></a>5.uiKit</h3><p>uiKit是一款轻量级、模块化的前端框架，可快速构建强大的web前端界面。</p>
<p>官网地址：<a target="_blank" rel="noopener" href="http://www.getuikit.net/">http://www.getuikit.net/</a></p>
<h3 id="6-H-ui"><a href="#6-H-ui" class="headerlink" title="6.H-ui"></a>6.H-ui</h3><p>H-ui是轻量级前端框架，简单免费，兼容性好，适用于中国网站。</p>
<p>官网地址：<a target="_blank" rel="noopener" href="http://www.h-ui.net/">http://www.h-ui.net/</a></p>
<h3 id="7-Weui"><a href="#7-Weui" class="headerlink" title="7.Weui"></a>7.Weui</h3><p>weUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。</p>
<p>官网地址：<a target="_blank" rel="noopener" href="https://github.com/weui/weui">https://github.com/weui/weui</a></p>
<h3 id="8-layui"><a href="#8-layui" class="headerlink" title="8.layui"></a>8.layui</h3><p>Layui 诞生于2016年金秋，是一款带着浓烈情怀的国产前端UI框架，她追求极简，又不失丰盈的内在，说她是史上最轻量的结晶，似乎并不为过。一切都源自于她对原生态的执着，对前端社区的那些噪杂声音的过滤，以及她本身的精心雕琢。</p>
<p>官网地址：<a target="_blank" rel="noopener" href="http://www.layui.com/">http://www.layui.com/</a></p>
<h3 id="9-YDUI-Touch"><a href="#9-YDUI-Touch" class="headerlink" title="9.YDUI Touch"></a>9.YDUI Touch</h3><p>YDUI Touch 专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高;使用 Flex 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局;实现强大的屏幕适配布局，等比例适配所有屏幕。什么？用得不开心？轻松切换 px;自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI;</p>
<p>官网地址：<a target="_blank" rel="noopener" href="http://www.ydui.org/">http://www.ydui.org/</a></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://xianguoji.gitee.io/myblog/2016/09/20/2016-09-20-%E5%A5%BD%E7%94%A8%E7%9A%84%E5%87%A0%E4%B8%AA%E5%89%8D%E7%AB%AFwebUI%E6%A1%86%E6%9E%B6/" data-id="ckds6fx9t0000k8qcec7a7t4m" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/myblog/tags/%E6%A1%86%E6%9E%B6/" rel="tag">框架</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-2016-08-23-移动端-网易-rem适配" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/myblog/2016/08/23/2016-08-23-%E7%A7%BB%E5%8A%A8%E7%AB%AF-%E7%BD%91%E6%98%93-rem%E9%80%82%E9%85%8D/" class="article-date">
  <time datetime="2016-08-22T16:00:00.000Z" itemprop="datePublished">2016-08-23</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/myblog/2016/08/23/2016-08-23-%E7%A7%BB%E5%8A%A8%E7%AB%AF-%E7%BD%91%E6%98%93-rem%E9%80%82%E9%85%8D/">移动端-网易-rem适配</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="第一步："><a href="#第一步：" class="headerlink" title="第一步："></a>第一步：</h3><h4 id="media标签写在head里面："><a href="#media标签写在head里面：" class="headerlink" title="media标签写在head里面："></a>media标签写在head里面：</h4><pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no&quot; /&gt;</code></pre>
<h3 id="第二步：加载头部script"><a href="#第二步：加载头部script" class="headerlink" title="第二步：加载头部script"></a>第二步：加载头部script</h3><pre><code>&lt;!--定义rem值：网易移动适配方案！--&gt;
&lt;script&gt;
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + &#39;px&#39;;
&lt;/script&gt;</code></pre>
<p>附注：7.5是根据你的设计稿的width决定写多少，如果是640的，那就写6.4；其他道理一样！</p>
<h3 id="第三部：在css样式里，一个div如果是宽500px-高200px；那么就是这样写："><a href="#第三部：在css样式里，一个div如果是宽500px-高200px；那么就是这样写：" class="headerlink" title="第三部：在css样式里，一个div如果是宽500px 高200px；那么就是这样写："></a>第三部：在css样式里，一个div如果是宽500px 高200px；那么就是这样写：</h3><pre><code>div&#123;
    width:5rem;
    height:2rem
&#125;</code></pre>
<p>字体不用rem；直接写像素！就是这么简单！</p>
<pre><code>@media screen and (max-width:321px)&#123;
    .m-navlist&#123;font-size:15px&#125;
&#125;

@media screen and (min-width:321px) and (max-width:400px)&#123;
    .m-navlist&#123;font-size:16px&#125;
&#125;

@media screen and (min-width:400px)&#123;
    .m-navlist&#123;font-size:18px&#125;
&#125;</code></pre>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://xianguoji.gitee.io/myblog/2016/08/23/2016-08-23-%E7%A7%BB%E5%8A%A8%E7%AB%AF-%E7%BD%91%E6%98%93-rem%E9%80%82%E9%85%8D/" data-id="ckds6fxa20005k8qc0gecar35" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/myblog/tags/rem/" rel="tag">rem</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-2016-08-15-使用rem适配不同屏幕的移动设备" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/myblog/2016/08/15/2016-08-15-%E4%BD%BF%E7%94%A8rem%E9%80%82%E9%85%8D%E4%B8%8D%E5%90%8C%E5%B1%8F%E5%B9%95%E7%9A%84%E7%A7%BB%E5%8A%A8%E8%AE%BE%E5%A4%87/" class="article-date">
  <time datetime="2016-08-14T16:00:00.000Z" itemprop="datePublished">2016-08-15</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/myblog/2016/08/15/2016-08-15-%E4%BD%BF%E7%94%A8rem%E9%80%82%E9%85%8D%E4%B8%8D%E5%90%8C%E5%B1%8F%E5%B9%95%E7%9A%84%E7%A7%BB%E5%8A%A8%E8%AE%BE%E5%A4%87/">使用rem适配不同屏幕的移动设备</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>rem：是指相对于根元素（即html元素）的字体大小的单位。是CSS3新增的一个相对单位，使用rem为元素设定字体大小时，相对大小对比的是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。</p>
<h3 id="方案一："><a href="#方案一：" class="headerlink" title="方案一："></a>方案一：</h3><h4 id="先设置header里面的meta标签："><a href="#先设置header里面的meta标签：" class="headerlink" title="先设置header里面的meta标签："></a>先设置header里面的meta标签：</h4><pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1,maximum-scale=1, minimum-scale=1&quot;&gt;</code></pre>
<h4 id="在header写上script标签"><a href="#在header写上script标签" class="headerlink" title="在header写上script标签:"></a>在header写上script标签:</h4><pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
 　　document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + &#39;px&#39;;
 &lt;/script&gt;</code></pre>
<h4 id="我们只需要在根元素确定一个参考值，在根元素中设置多大的字体，这完全可以根据您自己的需，大家也可以参考下图："><a href="#我们只需要在根元素确定一个参考值，在根元素中设置多大的字体，这完全可以根据您自己的需，大家也可以参考下图：" class="headerlink" title="我们只需要在根元素确定一个参考值，在根元素中设置多大的字体，这完全可以根据您自己的需，大家也可以参考下图："></a>我们只需要在根元素确定一个参考值，在根元素中设置多大的字体，这完全可以根据您自己的需，大家也可以参考下图：</h4><img src="/myblog/images/rem适配/203813p1g7mjl1hgrzrgxe.jpg">

<p>想用其他参数的，也可以去<a target="_blank" rel="noopener" href="http://pxtoem.com/">http://pxtoem.com/</a>这个网站去设置</p>
<h2 id="常用写法："><a href="#常用写法：" class="headerlink" title="常用写法："></a>常用写法：</h2><h2 id="css"><a href="#css" class="headerlink" title="css:"></a>css:</h2><pre><code>html &#123;
    font-size: 62.5%;
    /*10 ÷ 16 × 100% = 62.5%*/
&#125;
body &#123;
    font-size: 1.4rem;
    /*1.4 × 10px = 14px */
&#125;
h1 &#123;
    font-size: 2.4rem;
    /*2.4 × 10px = 24px*/
&#125;</code></pre>
<p>在根元素中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）。从上面的计算结果，我们使用“rem”就像使用“px”一样的方便，而且同时解决了“px”和“em”两者不同之处。<br>注：在Chrome下，默认最下字体为12px,可以设置font-size: 625%</p>
<h3 id="方案二："><a href="#方案二：" class="headerlink" title="方案二："></a>方案二：</h3><h2 id="此方案仅适用于移动端web"><a href="#此方案仅适用于移动端web" class="headerlink" title="此方案仅适用于移动端web"></a>此方案仅适用于移动端web</h2><p>该方案使用相当简单，把下面这段已压缩过的 原生JS（仅1kb，源码已在文章底部更新，2017/5/3） 放到 HTML 的 head 标签中即可（注:不要手动设置viewport，该方案自动帮你设置）</p>
<pre><code>&lt;script&gt;!function(e)&#123;function t(a)&#123;if(i[a])return i[a].exports;var n=i[a]=&#123;exports:&#123;&#125;,id:a,loaded:!1&#125;;return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports&#125;var i=&#123;&#125;;return t.m=e,t.c=i,t.p=&quot;&quot;,t(0)&#125;([function(e,t)&#123;&quot;use strict&quot;;Object.defineProperty(t,&quot;__esModule&quot;,&#123;value:!0&#125;);var i=window;t[&quot;default&quot;]=i.flex=function(e,t)&#123;var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d&#123;3&#125;)/i),l=o.match(/U3\/((\d+|\.)&#123;5,&#125;)/i),c=l&amp;&amp;parseInt(l[1].split(&quot;.&quot;).join(&quot;&quot;),10)&gt;=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&amp;&amp;d[1]&gt;534||c||(s=1);var u=1/s,m=r.querySelector(&#39;meta[name=&quot;viewport&quot;]&#39;);m||(m=r.createElement(&quot;meta&quot;),m.setAttribute(&quot;name&quot;,&quot;viewport&quot;),r.head.appendChild(m)),m.setAttribute(&quot;content&quot;,&quot;width=device-width,user-scalable=no,initial-scale=&quot;+u+&quot;,maximum-scale=&quot;+u+&quot;,minimum-scale=&quot;+u),r.documentElement.style.fontSize=a/2*s*n+&quot;px&quot;&#125;,e.exports=t[&quot;default&quot;]&#125;]);  flex(100, 1);&lt;/script&gt;</code></pre>
<h2 id="代码原理"><a href="#代码原理" class="headerlink" title="代码原理"></a>代码原理</h2><p>这是阿里团队的高清方案布局代码，所谓高清方案就是根据设备屏幕的DPR（设备像素比，又称DPPX，比如dpr=2时，表示1个CSS像素由4个物理像素点组成）** 动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值，进而达到高清效果**。</p>
<h2 id="有何优势"><a href="#有何优势" class="headerlink" title="有何优势"></a>有何优势</h2><p>引用简单，布局简便<br>根据设备屏幕的DPR,自动设置最合适的高清缩放。<br>保证了不同设备下视觉体验的一致性。（老方案是，屏幕越大元素越大；此方案是，屏幕越大，看的越多）<br>有效解决移动端真实1px问题（这里的1px 是设备屏幕上的物理像素）</p>
<h2 id="如何使用"><a href="#如何使用" class="headerlink" title="如何使用"></a>如何使用</h2><p>重要的事情说三遍！</p>
<p>绝不是每个地方都要用rem，rem只适用于固定尺寸！</p>
<p>绝不是每个地方都要用rem，rem只适用于固定尺寸！</p>
<p>绝不是每个地方都要用rem，rem只适用于固定尺寸！</p>
<p>在相当数量的布局情境中（比如底部导航元素平分屏幕宽，大尺寸元素），你必须使用百分比或者flex才能完美布局！<br>看过 《手机端页面自适应解决方案—rem布局》的朋友，应该对rem有所了解，这里不再赘述，<br>此方案也是默认 1rem = 100px，所以你布局的时候，完全可以按照设计师给你的效果图写各种尺寸啦。<br>比如你在效果图上量取的某个按钮元素长 55px, 宽37px ，那你直接可以这样写样式：</p>
<pre><code>.myBtn &#123;
   width: 0.55rem;
   height: 0.37rem;
&#125;</code></pre>
<p><a target="_blank" rel="noopener" href="https://minooo.github.io/Demo/react-study-step-03-demo/index.html#/">实践应用源码1（请在手机端或者手机模式下浏览效果更佳！）</a></p>
<p><a target="_blank" rel="noopener" href="https://minooo.github.io/Demo/react-study-step-04-demo/index.html#/">实践应用源码2（请在手机端或者手机模式下浏览效果更佳！）</a></p>
<p><a target="_blank" rel="noopener" href="https://codepen.io/minooo/pen/WoQjKW?editors=1100">示例源码</a></p>
<p>著作权归作者所有。部分转载自<em>minooo</em></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://xianguoji.gitee.io/myblog/2016/08/15/2016-08-15-%E4%BD%BF%E7%94%A8rem%E9%80%82%E9%85%8D%E4%B8%8D%E5%90%8C%E5%B1%8F%E5%B9%95%E7%9A%84%E7%A7%BB%E5%8A%A8%E8%AE%BE%E5%A4%87/" data-id="ckds6fx9y0001k8qcd0hab6gy" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/myblog/tags/rem/" rel="tag">rem</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-2015-08-25-HEXO搭建个人博客" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/myblog/2015/08/25/2015-08-25-HEXO%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/" class="article-date">
  <time datetime="2015-08-24T16:00:00.000Z" itemprop="datePublished">2015-08-25</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/myblog/2015/08/25/2015-08-25-HEXO%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/">转发潘柏信的--HEXO搭建个人博客</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>　　经过各种找资料，踩过各种坑，终于使用 hexo 搭建个人博客初步完成了，域名目前用得时 github 的，我的 hexo 是 3.1.1 版本，hexo 不同的版本，很多配置都不一样。好吧，废话不多说了，开始吧。     </p>
<p>　　本篇文章累计了大量评论，和我的一些解答，读者有什么问题可以先看看评论，或者搜下关键字，如果还是有问题可以给我在评论里给我留言，问题很着急的可以加我 ＱＱ：1499065178　，或者给我发邮件：<a href="mailto:leopardpan@icloud.com">leopardpan@icloud.com</a>  ，都可以，如果你已经搭建完成了，可以看看我的另一篇博客<a target="_blank" rel="noopener" href="http://baixin.io/2016/06/HEXO_Advanced/">HEXO进阶</a>，有讲如何能百度搜索你的博客、多台电脑使用HEXO发布博客等。我现在的博客是使用 Jekyll 搭建的，如果你想使用我现在的模板请看<a target="_blank" rel="noopener" href="http://baixin.io/2016/10/jekyll_tutorials1/">Jekyll搭建个人博客</a> </p>
<h2 id="正文："><a href="#正文：" class="headerlink" title="正文："></a>正文：</h2><p>　这边教程是针对与Mac的，<a target="_blank" rel="noopener" href="http://ibruce.info/2013/11/22/hexo-your-blog/?utm_source=tuicool">参考链接</a>，由于原文讲到的hexo是以前的老版本，所以现在的版本配置的时候会有些改动。</p>
<p>　之前是想着写博客，一方面是给自己做笔记，可以提升自己的写作、总结能力，一个技术点我们会使用，并不难，但是要做到让让别人也能听懂我们讲得，还是需要一定的技巧和经验的。很多类似于CSDN、博客园也都可以写文章，但是页面的样式我，不是太喜欢，简书还算好点得。最近看到一些大神们的博客（在我的友情链接里有），貌似都是用hexo写得，我也依葫芦画瓢的搭建了一个。不罗嗦了，直接上搭建步骤。</p>
<h2 id="配置环境"><a href="#配置环境" class="headerlink" title="配置环境"></a>配置环境</h2><h3 id="安装Node（必须）"><a href="#安装Node（必须）" class="headerlink" title="安装Node（必须）"></a>安装Node（必须）</h3><p>作用：用来生成静态页面的<br>到Node.js<a target="_blank" rel="noopener" href="https://nodejs.org/">官网</a>下载相应平台的最新版本，一路安装即可。</p>
<h3 id="安装Git（必须）"><a href="#安装Git（必须）" class="headerlink" title="安装Git（必须）"></a>安装Git（必须）</h3><p>作用：把本地的hexo内容提交到github上去.<br>安装Xcode就自带有Git，我就不多说了。</p>
<h3 id="申请GitHub（必须）"><a href="#申请GitHub（必须）" class="headerlink" title="申请GitHub（必须）"></a>申请GitHub（必须）</h3><p>作用：是用来做博客的远程创库、域名、服务器之类的，怎么与本地hexo建立连接等下讲。<br><a target="_blank" rel="noopener" href="https://github.com/">github</a>账号我也不再啰嗦了,没有的话直接申请就行了，跟一般的注册账号差不多，SSH Keys，看你自己了，可以不配制，不配置的话以后每次对自己的博客有改动提交的时候就要手动输入账号密码，配置了就不需要了，怎么配置我就不多说了，网上有很多教程。</p>
<h3 id="正式安装HEXO"><a href="#正式安装HEXO" class="headerlink" title="正式安装HEXO　"></a>正式安装HEXO　</h3><p>Node和Git都安装好后，可执行如下命令安装hexo：</p>
<pre><code>$ sudo npm install -g hexo</code></pre>
<h3 id="初始化"><a href="#初始化" class="headerlink" title="初始化"></a>初始化</h3><p>创建一个文件夹，如：Blog，cd到Blog里执行hexo init的。命令：</p>
<pre><code>hexo init</code></pre>
<p>好啦，至此，全部安装工作已经完成！</p>
<h3 id="生成静态页面"><a href="#生成静态页面" class="headerlink" title="生成静态页面"></a>生成静态页面</h3><p>继续再Blog目录下执行如下命令，生成静态页面</p>
<pre><code>hexo generate （hexo g  也可以）   </code></pre>
<h3 id="本地启动"><a href="#本地启动" class="headerlink" title="本地启动"></a>本地启动</h3><p>启动本地服务，进行文章预览调试，命令：</p>
<pre><code>hexo server   </code></pre>
<p>浏览器输入<a href="%E5%B0%B1%E5%8F%AF%E4%BB%A5%E7%9C%8B%E5%88%B0%E6%9C%80%E5%8E%9F%E5%A7%8B%E7%9A%84%E6%95%88%E6%9E%9C%E4%BA%86">http://localhost:4000</a><br>我不知道你们能不能，反正我不能，因为我还有环境没配置好</p>
<h3 id="常见的HEXO配置错误："><a href="#常见的HEXO配置错误：" class="headerlink" title="常见的HEXO配置错误："></a>常见的HEXO配置错误：</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">ERROR Plugin load failed: hexo-server</span><br><span class="line"></span><br><span class="line">原因： Besides, utilities are separated into a standalone module. hexo.util is not reachable anymore.</span><br><span class="line"></span><br><span class="line">解决方法，执行命令：$ sudo npm install hexo-server</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">执行命令hexo server，提示：Usage: hexo&lt;Command&gt; ....</span><br><span class="line"></span><br><span class="line">原因：我认为是没有生成本地服务</span><br><span class="line"></span><br><span class="line">解决方法，执行命令：$ npm install hexo-server --save</span><br><span class="line"></span><br><span class="line">提示：hexo-server@0.1.2 node_modules&#x2F;hexo-server</span><br><span class="line">.... </span><br><span class="line"></span><br><span class="line">表示成功了[参考](https:&#x2F;&#x2F;hexo.io&#x2F;zh-cn&#x2F;docs&#x2F;server.html)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>这个时候再执行：$ hexo-server</p>
<p>得到: INFO  Hexo is running at <a target="_blank" rel="noopener" href="http://0.0.0.0:4000/">http://0.0.0.0:4000/</a>. Press Ctrl+C to stop.</p>
<p>这个时候再点击<a target="_blank" rel="noopener" href="http://0.0.0.0:4000/">http://0.0.0.0:4000</a>，正常情况下应该是最原始的画面，但是我看到的是：<br>白板和Cannot GET /   几个字<br>原因： 由于2.6以后就更新了，我们需要手动配置些东西，我们需要输入下面三行命令：</p>
<pre><code>npm install hexo-renderer-ejs --save
npm install hexo-renderer-stylus --save
npm install hexo-renderer-marked --save</code></pre>
<p>这个时候再重新生成静态文件，命令：</p>
<pre><code>hexo generate （或hexo g）</code></pre>
<p>启动本地服务器：</p>
<pre><code>hexo server （或hexo s）</code></pre>
<p>再点击网址<a target="_blank" rel="noopener" href="http://0.0.0.0:4000/">http://0.0.0.0:4000</a> OK终于可以看到属于你自己的blog啦，?，虽然很简陋，但好歹有了一个属于自己的小窝了。<a target="_blank" rel="noopener" href="https://disqus.com/home/discussion/bsspirit/hexogithubweb/">参考链接</a>，本地已经简单的设置好了，但是现在域名和服务器都是基于自己的电脑，接下来需要跟github进行关联。</p>
<h2 id="配置Github"><a href="#配置Github" class="headerlink" title="配置Github"></a>配置Github</h2><h3 id="建立Repository"><a href="#建立Repository" class="headerlink" title="建立Repository"></a>建立Repository</h3><p>建立与你用户名对应的仓库，仓库名必须为【your_user_name.github.io】，固定写法<br>然后建立关联，我的Blog在本地/Users/leopard/Blog，Blog是我之前建的东西也全在这里面，有：</p>
<blockquote>
<p>Blog<br>　｜<br>　｜－－ _config.yml<br>　｜－－ node_modules<br>　｜－－ public<br>　｜－－ source<br>　｜－－ db.json<br>　｜－－ package.json<br>　｜－－ scaffolds<br>　｜－－ themes          　　　　　
　　　</p>
</blockquote>
<p>现在我们需要_config.yml文件，来建立关联，命令：</p>
<pre><code>vim _config.yml</code></pre>
<p>翻到最下面，改成我这样子的，注意： <code>: 后面要有空格</code></p>
<pre><code>deploy:
  type: git
  repository: https://github.com/leopardpan/leopardpan.github.io.git
  branch: master</code></pre>
<p>执行如下命令才能使用git部署</p>
<pre><code>npm install hexo-deployer-git --save</code></pre>
<p>网上会有很多说法，有的type是github, 还有repository 最后面的后缀也不一样，是github.com.git，我也踩了很多坑，我现在的版本是hexo: 3.1.1，执行命令hexo -vsersion就出来了,貌似3.0后全部改成我上面这种格式了。<br>忘了说了，我没用SSH Keys如果你用了SSH Keys的话直接在github里复制SSH的就行了，总共就两种协议，相信你懂的。<br>然后，执行配置命令：</p>
<pre><code>hexo deploy</code></pre>
<p>　然后再浏览器中输入<a target="_blank" rel="noopener" href="http://leopardpan.github.io/">http://leopardpan.github.io/</a>就行了，我的 github 的账户叫 leopardpan ,把这个改成你 github 的账户名就行了</p>
<h3 id="部署步骤"><a href="#部署步骤" class="headerlink" title="部署步骤"></a>部署步骤</h3><p>每次部署的步骤，可按以下三步来进行。</p>
<pre><code>hexo clean
hexo generate
hexo deploy</code></pre>
<p>一些常用命令：</p>
<pre><code>hexo new &quot;postName&quot; #新建文章
hexo new page &quot;pageName&quot; #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，&#39;ctrl + c&#39;关闭server）
hexo deploy #将.deploy目录部署到GitHub
hexo help  #查看帮助
hexo version  #查看Hexo的版本</code></pre>
<p>这里有大量的<a target="_blank" rel="noopener" href="https://github.com/hexojs/hexo/wiki/Themes">主题列表</a>使用方法里面<br>都有详细的介绍，我就不多说了。<br>我这里有几款个人认为不错的主题，免去你们，一个一个的选了，欢迎吐槽我的审美，?<br>　<a target="_blank" rel="noopener" href="https://github.com/daisygao/hexo-themes-cover">Cover</a> - A chic theme with facebook-like cover photo<br>　<a target="_blank" rel="noopener" href="https://github.com/henryhuang/oishi">Oishi</a> - A white theme based on Landscape plus and Writing.<br>　<a target="_blank" rel="noopener" href="https://github.com/hardywu/hexo-theme-sidebar">Sidebar</a> - Another theme based on Light with a simple sidebar<br>　<a target="_blank" rel="noopener" href="https://github.com/SuperKieran/TKL">TKL</a> - A responsive design theme for Hexo. 一个设计优雅的响应式主题<br>　<a target="_blank" rel="noopener" href="https://github.com/levonlin/Tinnypp">Tinnypp</a> - A clean, simple theme based on Tinny<br>　<a target="_blank" rel="noopener" href="https://github.com/yunlzheng/hexo-themes-writing">Writing</a> - A small and simple hexo theme based on Light<br>　<a target="_blank" rel="noopener" href="https://github.com/litten/hexo-theme-yilia">Yilia</a> - Responsive and simple style 优雅简洁响应式主题，我用得就是这个。<br>　<a target="_blank" rel="noopener" href="https://github.com/Voidly/pacman">Pacman voidy</a> - A theme with dynamic tagcloud and dynamic snow      </p>
<h3 id="一些基本路径"><a href="#一些基本路径" class="headerlink" title="一些基本路径"></a>一些基本路径</h3><p>　文章在 source/_posts，编辑器可以用 Sublime，支持 markdown 语法。如果想修改头像可以直接在主题的 _config.yml 文件里面修改，友情链接，之类的都在这里，修改名字在 public/index.html 里修改，开始打理你的博客吧，有什么问题或者建议，都可以提出来，我会继续完善的。</p>
<p>Markdown语法参考链接: <a target="_blank" rel="noopener" href="https://www.zybuluo.com/mdeditor">作业部落</a></p>
<h3 id="Q-amp-A"><a href="#Q-amp-A" class="headerlink" title="Q&amp;A"></a>Q&amp;A</h3><blockquote>
<p>问：如何让文章想只显示一部分和一个 <code>阅读全文</code> 的按钮？<br>答：在文章中加一个 <code>&lt;!--more--&gt;</code> ， <code>&lt;!--more--&gt;</code> 后面的内容就不会显示出来了。</p>
</blockquote>
<p> </p>

<blockquote>
<p>问：本地部署成功了，也能预览效果，但使用 username.github.io 访问，<code>出现 404 </code> .<br>答：首先确认 hexo d 命令执行是否报错，如果没有报错，再查看一下你的 github 的 username.github.io 仓库，你的博客是否已经成功提交了，你的 github 邮箱也要通过验证才行。</p>
</blockquote>
<p> </p>


      
    </div>
    <footer class="article-footer">
      <a data-url="https://xianguoji.gitee.io/myblog/2015/08/25/2015-08-25-HEXO%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/" data-id="ckds6fxa10003k8qc5eoec0vu" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/myblog/tags/%E5%8D%9A%E5%AE%A2/" rel="tag">博客</a></li></ul>

    </footer>
  </div>
  
</article>


  


  <nav id="page-nav">
    
    <a class="extend prev" rel="prev" href="/myblog/">&amp;laquo; Prev</a><a class="page-number" href="/myblog/">1</a><span class="page-number current">2</span>
  </nav>

</section>
        
          <aside id="sidebar">
  
    

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tags</h3>
    <div class="widget">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/js/" rel="tag">js</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/rem/" rel="tag">rem</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E5%85%B6%E4%BB%96/" rel="tag">其他</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E5%8D%9A%E5%AE%A2/" rel="tag">博客</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" rel="tag">性能优化</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E6%A1%86%E6%9E%B6/" rel="tag">框架</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E7%A7%BB%E5%8A%A8%E7%AB%AF/" rel="tag">移动端</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E8%B7%A8%E5%9F%9F%E8%AF%B7%E6%B1%82/" rel="tag">跨域请求</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/myblog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/myblog/tags/js/" style="font-size: 10px;">js</a> <a href="/myblog/tags/rem/" style="font-size: 16.67px;">rem</a> <a href="/myblog/tags/%E5%85%B6%E4%BB%96/" style="font-size: 10px;">其他</a> <a href="/myblog/tags/%E5%8D%9A%E5%AE%A2/" style="font-size: 13.33px;">博客</a> <a href="/myblog/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" style="font-size: 13.33px;">性能优化</a> <a href="/myblog/tags/%E6%A1%86%E6%9E%B6/" style="font-size: 10px;">框架</a> <a href="/myblog/tags/%E7%A7%BB%E5%8A%A8%E7%AB%AF/" style="font-size: 13.33px;">移动端</a> <a href="/myblog/tags/%E8%B7%A8%E5%9F%9F%E8%AF%B7%E6%B1%82/" style="font-size: 10px;">跨域请求</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2020/08/">August 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/06/">June 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/05/">May 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/04/">April 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/03/">March 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/02/">February 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/01/">January 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2016/10/">October 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2016/09/">September 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2016/08/">August 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2015/08/">August 2015</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/myblog/2020/08/13/2020-08-13%E4%B8%AA%E4%BA%BA%E7%AE%80%E5%8E%86/">(no title)</a>
          </li>
        
          <li>
            <a href="/myblog/2017/06/18/2017-06-18-%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B8%80/">前端性能优化一</a>
          </li>
        
          <li>
            <a href="/myblog/2017/05/15/2017-05-15-%E8%B0%83%E7%94%A8%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE%E6%8F%92%E4%BB%B6-%E6%9B%B4%E6%96%B0/">调用百度地图插件-更新</a>
          </li>
        
          <li>
            <a href="/myblog/2017/04/23/2017-04-23-vue%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE/">vue搭建项目</a>
          </li>
        
          <li>
            <a href="/myblog/2017/04/21/2017-04-21-%E8%B0%83%E7%94%A8%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE%E6%8F%92%E4%BB%B6/">调用百度地图插件</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2020 Jason<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/myblog/" class="mobile-nav-link">Home</a>
  
    <a href="/myblog/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="/myblog/fancybox/jquery.fancybox.css">

  
<script src="/myblog/fancybox/jquery.fancybox.pack.js"></script>




<script src="/myblog/js/script.js"></script>




  </div>
</body>
</html>